/*
 * @Author: tomystery 
 * @Date: 2018-07-11 16:24:12 
 * @Last Modified by: t
 * @Last Modified time: 2018-07-11 17:23:50
 * @filename:page/product/index/edit.jsx
 */
import React from 'react';
import PageTitle from 'component/page-title/index.jsx';
import { Link } from 'react-router-dom';
import CategorySelector from './category-selector.jsx';
import MUtil from 'util/mm.jsx';
const _mm = new MUtil();
import './save.scss';
import Product from 'service/product-service.jsx';
const _product = new Product();

class ProductSave extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            id: this.props.match.params.pid,
            name                : '',
            subtitle            : '',
            categoryId          : 0,
            parentCategoryId    : 0,
            subImages           : [],
            price               : '',
            stock               : '',
            detail              : '',
            status              : 1 //商品状态1为在售
        }
    }
    //加载它
    componentDidMount() {
        this.loadProduct();

    }
    //加载商品详情
    loadProduct() {
        //如果有id就回填出来
        if (this.state.id) {
            _product.getProduct(this.state.id).then((res) => {
                let images = res.subImages.split(',')
                res.subImages = images.map((imgUri) => {
                    return {
                        uri: imgUri,
                        url: res.imageHost + imgUri
                    }
                });
                this.setState(res);
            },(errMsg)=>{
                _mm.errTips(errMsg)
            });
        }
    }

    render() {
        const { name, subtitle, subImages, categoryId, parentCategoryId, detail,  price, stock } = this.state
        return (
            <div id='page-wrapper'>
                <div className='row'>
                    <div className='col-md-12'>
                        <PageTitle title='商品详情' />
                    </div>
                </div>
                <div className="form-horizontal">
                    <div className="form-group">
                        <label className="col-sm-2 control-label">商品名称</label>
                        <div className="col-sm-10">
                            <p className="form-control-static">{name}</p>

                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-sm-2 control-label">商品描述</label>
                        <div className="col-sm-10">
                            <p className="form-control-static">{subtitle}</p>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-sm-2 control-label">所属分类</label>
                        <CategorySelector readOnly categoryId={categoryId} parentCategoryId={parentCategoryId} />
                    </div>
                    <div className="form-group">
                        <label className="col-sm-2 control-label">商品价格</label>
                        <div className="col-sm-10">
                            <input type="email" name='price' value={price} readOnly className="form-control" id="inputEmail3" placeholder='价格' />
                            <div className="input-group-addon">元</div>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-sm-2 control-label">商品库存</label>
                        <div className="col-sm-10">
                            <input type="email" readOnly value={stock} name='stock' className="form-control" id="inputEmail3" placeholder='库存' />
                        </div>
                    </div>
                    <div className="form-group">
                        <label className='col-sm-2 control-label'>商品图片</label>
                        <div className='col-sm-10'>
                        {
                                subImages.length ? subImages.map(
                                    (image, index) => (
                                    <div className="img-con" key={index}>
                                        <img className="img" src={image.url} />
                                    </div>)
                                ) : (<div>暂无图片</div>)
                            }
                            
                        </div>
                        <div className='col-md-offset-2 col-sm-10 file-upload-con' >

                        </div>
                    </div>
                    <div className='form-group'>
                        <label className='col-md-2 control-label'>商品详情</label>
                        <div className='col-md-10'>
                            <div dangerouslySetInnerHTML={{__html:detail}}></div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
export default ProductSave